﻿{% extends "base.html" %}

{% block sectionbody %}

<div>
  <div><span id = "addbookbar">添加一本书</span></div>
  <div id = "addbook_div" style="display: none">
    <form id="addbook_form" enctype="multipart/form-data">
      <div><label>输入书名：</label></div>
      <div><input name="book_name" type="text"/></div>
      <div><label>书的描述：</label></div>
      <div><textarea name="book_description" rows="3" cols="60"></textarea></div>
      <div><label>书的内容：</label></div>
      <div>请将书的内容做成一个UTF-8编码的TSV(制表符分隔取值)的文本，拷贝到下面的文本框中。</div>
      <div><input type="radio" name="book_format" value="three" checked /> 格式是:单词tab音标tab翻译</div>
      <div><input type="radio" name="book_format" value="two" /> 格式是:单词tab翻译</div>
      <div><textarea name="book_content" rows="10" cols="60"></textarea></div>
      <div><input id="addbook_submit" type="submit" value="开始创建单词书"/></div>
    </form>
  </div>
  <div><span>当前网站拥有{{ public_books|length }}本单词书:</span></div>
  <div>
    <ul>
    {% for book in public_books %}
      <li><a href="/{{ book.bookname }}">{{ book.bookname }}</li>
    {% endfor %}
    </ul>
  </div>
</div>
<script>
  
  var book_description = $("textarea[name='book_description']").val();
  var book_format = $("input[name='book_format']").val();
  var book_content = $("textarea[name='book_content']").val();
  function varify_book(){
    var alert_message="";
    if(book_name == "" || book_name == undefined){
      alert_message = "你需要输入一个书名\n";
    }
    if(book_description == "" || book_description == undefined){
      alert_message += "你需要输入对书的描述\n";
    }
    if(book_format == "" || book_format == undefined){
      alert_message += "你需要输入书的格式\n";
    }
    if(alert_message!=""){
      alert(alert_message);
      return false;
    }
  }
  $(document).ready(function(){
    $("#addbookbar").click(function(){ $("#addbook_div").toggle("normal"); });
    $("#addbook_form").submit(function(){return false;})
    $("#addbook_submit").click(
      function () {
        var book_name = $("input[name='book_name']").val();
        //varify_book();
        $.post("ajax", {"method": "addbook", 
          "params": {
            "name": book_name,
            "desc": $("textarea[name='book_content']").val(),
            "number":[1,2,3,4,5,{"test1":6,"test2":23}],
          }},
          function(){},
          "json"
        );
        //alert("hello");
        //return false;
      }
    );
  })
</script>
{% endblock %}
